<template>
  <view class="myLogin">
    <u-cell-group :border="false" :customStyle="{ 'margin-bottom': '20px' }">
      <u-cell
        title="账号登录"
        :border="false"
        :titleStyle="{ 'font-weight': 600, 'font-size': '24px' }"
        :isLink="true"
      >
        <text slot="value" class="u-slot-value">手机号登录</text>
        <u-icon
          slot="right-icon"
          name="play-right-fill"
          color="#EF4F3F"
          size="10"
        ></u-icon>
      </u-cell>
    </u-cell-group>
    <u--form
      :rules="rules"
      labelPosition="left"
      :model="model1"
      ref="uForm"
      class="form"
    >
      <u-form-item prop="form.account" borderBottom ref="item1">
        <u--input
          v-model="model1.form.account"
          clearable
          border="none"
          placeholder="请输入账号"
        ></u--input>
      </u-form-item>

      <u-form-item prop="form.password" borderBottom ref="item2">
        <u--input
          v-model="model1.form.password"
          :type="passwordType ? 'password' : 'text'"
          placeholder="请输入密码"
          border="none"
          clearable
          class="password"
          :suffixIcon="passwordType ? '/static/眼睛_闭@2x.png' : 'eye'"
        >
          <!-- :type="passwordType ? 'password' : 'text'" -->
          <!--  -->
          <!-- -->
          <!-- :name="passwordType ? '/static/眼睛_闭@2x.png' : 'eye'" -->
          <!-- <u-icon
            slot="suffix"
            :name="passwordType ? '/static/眼睛_闭@2x.png' : 'eye'"
            color="#2a2929"
            @click="changeType"
          ></u-icon> -->
        </u--input>
      </u-form-item>
      <view class="clickArea" @click="changeType"></view>
    </u--form>

    <u-button
      type="error"
      shape="circle"
      text="登录"
      :disabled="buttonType"
      @click="onLogin"
    ></u-button>
  </view>
</template>

<script>
export default {
  name: "loginPage",
  components: {},
  data() {
    return {
      value: "",
      passwordType: true,
      buttonType: true,
      model1: {
        form: {
          account: "hbsj002",
          password: "123456",
        },
      },
      rules: {
        "form.account": [
          {
            required: true,
            message: "请账号必填",
            trigger: ["blur", "change"],
          },
        ],
        "form.password": [
          {
            required: true,
            message: "密码必填",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  created() {},
  mounted() {},
  onLoad() {},
  methods: {
    changeType() {
      this.passwordType = !this.passwordType;
    },
    onLogin() {
      this.$refs.uForm
        .validate()
        .then(async (res) => {
          if (res) {
            let { data } = await uni.$http.post("/login/account", {
              account: this.model1.form.account,
              password: this.model1.form.password,
            });
            // console.log(data, "data");
            // 调用vuex的方法储存token
            if (data.msg === "登录失败") {
              uni.showToast({
                title: "账号或密码错误",
                icon: "none",
              });
              return;
            }
            this.$store.commit("setToken", data.data);
            this.$u.toast("登录成功");

            setTimeout(() => {
              uni.switchTab({
                url: "/pages/index/index",
              });
            }, 500);
            // this.$u.route({
            //   type: "reLaunch",
            //   url: "/pages/index/index",
            // });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  watch: {
    // 监听model1.form.password并且立即执行
    "model1.form.password": {
      handler(val) {
        if (val.length >= 5 && this.model1.form.account.length) {
          this.buttonType = false;
        } else {
          this.buttonType = true;
        }
      },
      immediate: true,
    },
    // 监听model1.form.account并且立即执行
    "model1.form.account": {
      handler(val) {
        if (val.length && this.model1.form.password.length >= 5) {
          this.buttonType = false;
        } else {
          this.buttonType = true;
        }
      },
      immediate: true,
    },
  },
  onReady() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    this.$refs.uForm.setRules(this.rules);
  },
};
</script>

<style lang="scss">
.u-slot-value {
  color: #ef4f3f;
  font-weight: 500;
  font-size: 16px;
}

::v-deep .u-cell__body {
  padding: 20px 0 !important;
}

.myLogin {
  padding: 33px;
}

.form {
  margin-bottom: 50px;
}

.input-icon {
  width: 35px;
  display: flex;
  justify-content: space-between;
}
/deep/ .u-form-item__body__right__message {
  margin-left: 0px !important;
}
.clickArea {
  position: absolute;
  right: 0;
  margin-right: 33px;
  margin-top: -31px;
  width: 20px;
  height: 20px;
  background-color: transparent;
}
/* .password{
  position: relative;
  z-index: 999;
} */
</style>